﻿<template>
    <div class="page">
        <!-- 头部 -->
        <v-front-header></v-front-header>
        <!-- 搜索框 -->
        <div class="search">
            <el-select
                clearable
                size="medium"
                v-model="query.college"
                value-key="college_id"
                placeholder="学院"
                @change="queryChange"
                @clear="queryClear"
                class="handle-select mr10"
            >
                <el-option v-for="item in colleges" :key="item.college_id" :label="item.college_name" :value="item"> </el-option>
            </el-select>
            <el-select
                clearable
                v-model="query.nature"
                value-key="nature_id"
                placeholder="课程类型"
                @change="queryChange"
                @clear="queryClear"
                class="handle-select mr10"
            >
                <el-option v-for="item in natures" :key="item.nature_id" :label="item.nature_name" :value="item"> </el-option>
            </el-select>
            <el-input v-model="query.name" placeholder="课程名" class="handle-input mr10"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <!-- 课程展示 -->
        <div style="height:100%;">
            <el-scrollbar style="height:100%;display:flex;flex:1;justify-content: center;align-items: center;width:100%">
                <happy-scroll color="rgba(0,0,0,0.5)" size="5" style="height:100%;weight:100%">
                    <el-row style="margin-left:25px;margin-top:10px">
                        <el-col v-for="lesson in lessons" :key="lesson.course_id" class="col">
                            <el-card :body-style="{ padding: '0px' }" style="width:220px;height:300px;">
                                <template>
                                    <div style=" border-bottom: 1px solid #99a9bf;width:100%;margin-bottom:15px">
                                        <a @click="toDetail(lesson.course_id)">
                                            <img :src="lesson.image_url" class="image" />
                                        </a>
                                    </div>
                                    <div style="font-size:14px;margin-left:8px">
                                        <span>课程名字:</span>
                                        <span>{{ lesson.course_name }}</span>
                                    </div>
                                    <div style="font-size:14px;margin-left:8px">
                                        <span>课程类型:</span>
                                        <span>{{ lesson.nature.nature_name }}</span>
                                    </div>
                                    <div style="font-size:14px;margin-left:8px">
                                        <span>所属院系:</span>
                                        <span>{{ lesson.college.college_name }}</span>
                                    </div>
                                </template>
                            </el-card>
                        </el-col>
                    </el-row>
                    <!-- 分页 -->
                </happy-scroll>
            </el-scrollbar>
            <div class="pagination">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="query.pageSize"
                    :page-count="pageTotal"
                    @current-change="handlePageChange"
                >
                </el-pagination>
            </div>
        </div>
        <!-- <v-front-bottom></v-front-bottom> -->
    </div>
</template>

<script>
import vFrontHeader from '../common/FrontHeader';
import vFrontBottom from '../common/FrontBottom';
import { fetchData } from '../../api/index';
import { getRequest } from '../../api/index';
import { postRequest } from '../../api/index';
export default {
    name: 'Courses',
    data() {
        return {
            query: {
                college: { college_id: 0, college_name: '请选择' },
                nature: { nature_id: 0, nature_name: '请选择' },
                major: { major_id: 0 },
                name: '',
                input: '',
                pageIndex: 1,
                pageSize: 12
            },
            pageTotal: 0,
            lessons: [],
            form: {
                nature: { nature_id: 1 },
                college: { college_id: 1 }
            },
            natures: [],
            colleges: []
        };
    },
    mounted() {
        this.list = this.lessons.map(item => {
            return {
                value: `value:${item}`,
                label: `label:${item}`
            };
        });
    },
    created() {
        this.getData();
        this.getNatures();
        this.getColleges();
    },
    methods: {
        getData() {
            // TODO 接口请求
            getRequest('/public/course/getall', {
                itemsofpage: this.query.pageSize,
                current_page: this.query.pageIndex
            }).then(res => {
                console.log('课程接口');
                console.log(res);
                this.lessons = res.data.courses;
                this.pageTotal = res.data.total_pages;
            });
        },
        searchData(name) {
            getRequest('/public/course/getbyname', {
                course_name: this.query.name,
                itemsofpage: this.query.pageSize,
                current_page: this.query.pageIndex
            }).then(res => {
                if (res.code == 0) {
                    this.lessons = res.data.courses;
                    this.pageTotal = res.data.total_pages;
                } else {
                    this.$message.error('获取课程信息失败!');
                }
            });
        },
        // 获取 全部课程类型
        getNatures() {
            getRequest('/public/course/getnature').then(res => {
                console.log(res);
                this.natures = res.data;
            });
        },
        // 获取 全部学院信息
        getColleges() {
            getRequest('/public/baseinfo/college/getall').then(res => {
                console.log(res);
                this.colleges = res.data;
            });
        }, // select查询变化时
        queryChange() {
            this.$set(this.query, 'name', '');
            this.$set(this.query, 'pageIndex', 1);
            getRequest('/public/course/getbyunion', {
                college_id: this.query.college.college_id,
                major_id: this.query.major.major_id,
                nature_id: this.query.nature.nature_id,
                itemsofpage: this.query.pageSize,
                current_page: 1
            }).then(res => {
                this.lessons = res.data.courses;
                this.pageTotal = res.data.total_pages;
            });
        },
        // select查询清空时
        queryClear() {
            if (!this.query.nature) {
                this.query.nature = { nature_id: 0 };
            } else if (!this.query.college) {
                this.query.college = { college_id: 0 };
            }
            this.getData();
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.searchData(this.query.name);
        },
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        // 跳转详情页方法
        toDetail(course_id) {
            this.$router.push('/courses/detail?course_id=' + course_id);
        }
    },
    components: {
        vFrontHeader
        // vFrontBottom
    }
};
</script>

<style>
html,
#app {
    overflow-x: hidden;
    overflow-y: auto;
}
body {
    overflow: auto;
    overflow-x: hidden;
}
.search {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    padding-top: 5px;
    border-bottom: 1px solid #cfcfcf;
    border-bottom: 1px solid #7c7a7a;
}

.lesson_name {
    width: 20%;
    padding-left: 10px;
    padding-right: 10px;
}

.happy-scroll-container {
    width: 1300px !important;
    height: 100% !important;
    display: flex;
    flex: 1;
}

.el-scrollbar__wrap {
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
}

::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
    scrollbar-width: none;
    /* Firefox */
}

.col {
    border-radius: 4px;
    /* padding-right: 20px; */
    margin-bottom: 10px;
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .is-always-shadow{
		padding-right: 0px ! important;
	} */
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: auto;
    display: block;
    padding-bottom: 5px;
    height: 200px;
    align-items: center;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}

.clearfix:after {
    clear: both;
}
.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
</style>